<template>
  <div class="container lease-goods">
<!--    <div class="step-box">
      <div class="step-item"
           :class="{active: order && order.status >= item.status}"
           :key="index"
           v-for="(item, index) in stepList">
        <div class="item">
          <div class="img"><span :class="['iconfont', item.icon]"></span></div>
          <div class="label">{{ item.name }}</div>
          <div class="sub">{{ item.sub }}</div>
        </div>
      </div>
    </div>-->
    <div class="body">
      <div class="filter-box">
        <div class="search-box">
          <div class="label"></div>
          <div class="search-input flex col-center">
            <i-input v-model="params.name"
                     prefix="ios-search"
                     placeholder="请输入关键字"
                     @clear="goodSearch"
                     @keyup.enter.native="goodSearch" />
            <i-button type="primary" @click="goodSearch">搜索</i-button>
          </div>
        </div>
        <div class="category-list">
          <div class="cate-item" :class="{active: !params.type}" @click="changeCategory(null)">不限</div>
          <div class="cate-item"
               :class="{active: params.type == item.id}"
               v-for="(item, index) in categoryList"
               :key="index"
               @click="changeCategory(item.id)">
            {{item.name}}
          </div>
        </div>
      </div>
      <div class="list-body" ref="listBody" @scroll="onScroll">
        <div class="list">
<!--          <Carousel ref="carousel" class="goods-item" loop radius-dot height="305">
            <CarouselItem v-for="(item, index) in bannerList" :key="index">
              <c-image :url="item.imgUrl" :lazy="false" height="305px"/>
            </CarouselItem>
          </Carousel>-->
          <div class="goods-item" v-for="(item, index) in list" :key="index" @click="showDetail(item)">
            <div class="img" @click.stop>
              <c-image :url="item.logo" alt="" radio="4px"/>
            </div>
            <div class="info">
              <div class="line-clamp fz-15">{{ item.title }}</div>
              <div class="color-muted fz-12">剩余库存 {{item.stock}}</div>
              <div class="handler">
                <div class="color-orange">
                  <span class="price">￥<span>{{item.minPrice}}</span></span>
                  <span class="fz-12">起</span>
                </div>
                <button :disabled="!item.stock" class="buy-btn">{{item.stock ? '立即租赁': '已抢光'}}</button>
              </div>
            </div>
          </div>
          <div class="no-data" :style="noDataStyle" v-if="!loading">
            <template v-if="finish && list.length == 0">暂无可租赁设备</template>
            <template v-if="finish && list.length > 0">没有更多了</template>
          </div>
          <Spin fix size="large" v-if="loading"></Spin>
        </div>
      </div>
    </div>
    <div class="fixed-handler">
      <div class="item" @click="backTop()">
        <div class="iconfont icon-totop"/>
        <div class="name color-orange">顶部</div>
      </div>
    </div>
    <detail v-model="detail.show" :deviceId="detail.id" @success="getLastOrder"/>
  </div>
</template>
<script>
import Detail from "@/views/lease/components/detail.vue";
import {slideshow} from "@/api/common";
import {categoryList, deviceList, getFirstOrder} from "@/api/deviceLease";
import {mapGetters} from "vuex";

export default {
  name: "index",
  components: {Detail},
  data() {
    return {
      categoryList: [],
      bannerList: [],
      stepList: [
        {
          name: '选择方案',
          sub: '选择合适方案和设备下单',
          icon: 'icon-waitpay',
          status: 1,
        },
        {
          name: '待送达',
          sub: '可等待店员送达或前台领取',
          icon: 'icon-waitsend',
          status: 2
        },
        {
          name: '设备归还',
          sub: '可呼叫回收或自行归还',
          icon: 'icon-billinging',
          status: 3
        },
        {
          name: '回收成功',
          sub: '店员回收确认',
          icon: 'icon-finish',
          status: 5
        }
      ],
      params: {
        name: '',
        pageNum: 1,
        pageSize: 15,
      },
      list: [],
      total: 0,
      loading: false,
      finish: false,
      detail: {
        show: false
      },
      order: null
    }
  },
  computed: {
    ...mapGetters(['shop']),
    noDataStyle() {
      if (this.finish && !this.list.length) {
        return 'grid-column: span 4;'
      }
      return 'grid-column: span 5;'
    }
  },
  methods: {
    init() {
      this.getCategoryList()
      this.goodSearch()
      this.getSlideshow()
      this.getLastOrder()
    },
    // 广告图
    getSlideshow() {
      slideshow({type: 4}).then(res => {
        if (res.code == 200) {
          this.bannerList = res.data
        }
      });
    },
    getCategoryList() {
      categoryList().then(res => {
        this.categoryList = res.data
      })
    },
    changeCategory(name) {
      this.params.type = name;
      this.goodSearch();
    },
    goodSearch() {
      this.params.pageNum = 1;
      this.list = [];
      this.finish = false
      this.getList()
    },
    onScroll(e) {
      let target = e.target;
      if (target.scrollHeight - target.offsetHeight - target.scrollTop <= 50) {
        this.getList();
      }
    },
    getList() {
      if (this.loading || this.finish) return
      this.loading = true;
      deviceList(this.params).then(res => {
        if (res.code != 200) return;
        this.list = this.list.concat((res.rows || []).map(item => {
          const priceList = JSON.parse(item.costMoney);
          // 找出最低价格的配置
          const minPriceConfig = priceList.reduce((min, current) => {
            return current.price < min.price ? current : min;
          }, priceList[0]);
          item.moneyList = priceList
          item.minPrice = minPriceConfig.price;
          item.minHours = minPriceConfig.hours;
          item.stock = Math.max(0, item.stock - item.useStock)
          return item;
        }));
        this.total = res.total;
        this.finish = this.list.length >= this.total;
        this.params.pageNum+=1;
      }).finally(() => {
        this.loading = false;
      })
    },
    showDetail(data) {
      this.detail = {
        show: true,
        id: data.equipmentId
      }
    },
    backTop() {
      this.$refs.listBody.scrollTo({
        top: 0,
        behavior: "smooth"
      })
    },
    getLastOrder(data = null) {
      if (data) {
        let index = this.list.findIndex(item => item.id == data.id);
        if (index) {
          let item = this.list[index]
          item.stock -= 1
          this.$set(this.list, index, item)
        }
      }
    }
  },
  created() {
    this.init()
    /*this.$nextTick(() => {
      this.$refs.carousel.handleResize()
    })*/
  },
  watch: {}
}
</script>

<style scoped lang="scss">
@import "index.scss";
</style>
